<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>siki学院首页</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
            background-color:#f5f8fa;
        }
        .bar_menu{
            background-color:#ffffff;
            width:35px;
            position:fixed;
            top:0px;
            bottom:0px;
            right:0px;
            border-left:1px solid aliceblue;
        }
        .bar_menu a{
            display:block;/* a是行内元素，盒子模型适用于块元素 */
            margin-top:100px;
            width:35px;
            text-align:center;
            color:#616161;
            font-size:14px;
            padding:20px 0px;
        }
        .bar_menu a:hover{/* 伪类选择器的使用 */
            cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
            background-color: #43bc60;
            color:white;
        }/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
        .nav{
            height:56px;
            padding:0px 10px;
            background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
        }
        .nav_left{
            height:56px;
            float:left;
        }
        .nav_left img{
            display:block;
            float:left;
            height:50px;
            margin-top:3px;
            margin-left:5px;
        }
        .nav_left ul{
            list-style-type:none;
            float:left;
            margin:0px  0px 0px 40px;
            padding:0px;
        }
        .nav_left ul li{
            margin:0px 40px 0px 0px;
            padding:0px;
            float:left;
            font-size:14px;
            color:#c1c1c1;
            line-height:56px;
        }
        .nav_right{
            height:56px;
            float:right;
        }
        .slider{
            height:451px;
            background-color:#16232b;
        }
        .slider img{
            display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
            height:451px;
            margin:0 auto;
        }
        .course_list{
            min-height:500px;
        }
        .course_list h2{
            font-size:32px;
            color:#313131;
            font-weight:500;
            text-align:center;
            margin-top:50px;
            margin-bottom:10px;
        }
        .course_list h4{
            font-size:16px;
            color:#919191;
            font-weight:400;
            text-align:center;
        }
        .course_nav{
            width:1170px;
            height:80px;
            margin:40px auto 0px;
        }
        .course_nav a{
            font-size:14px;
            color:#616161;
            margin-right:30px;
            padding:15px;
            border-radius:5px;
        }
        .course_nav a:hover{
            background-color:#ece8e8;
            cursor:pointer;
        }
        .selected{
            background-color:#43bc60;
            color:white !important;/* !important 让这个属性的优先级更高 */
        }
        .course_container{
            width:1170px;
            margin:0 auto;
            min-height:30px;
            /* background-color:blue; */
        }
        .course{
            float:left;
            width:248px;
            padding:0px 10px;
            margin:0px 10px;
            border:1px solid #e4ecf3;
            height:230px;
            background-color:#ffffff;
            border-radius:5px;
            margin-bottom:30px;
        }
        .course img{
            width:248px;
            height:138px;
            margin-top:10px;
        }
        .course_title{
            display:block;/* span标签是行内元素 */
            font-size:14px;
            color:#616161;
            margin-top:20px;
        }  
        .course .person{
            width:20px;
            height:15px;
            margin-top:10px;
        }
        .course .number{
            font-size:14px;
            color:#c1c1c1;
            position:relative;
            bottom:3px;
        }
        .class_list{
            min-height:500px;
        }
        .introduction{
            height:422px;
            background-color: #43bc60;
        }
        .footer_link{
            height:254px;
            background-color: #2e2e2e;
        }
        .copyright{
            height:105px;
            background-color: #212121;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="bar_menu">
        <a>学<br />习<br />中<br />心</a>
    </div>
    <div class="nav">
        <div class="nav_left">
            <img src="img/logo.png" />
            <ul>
                <li>首页</li>
                <li>Unity</li>
                <li>虚幻</li>
                <li>关于我们</li>
            </ul>
        </div>
        <div class="nav_right"></div>
    </div>
    <div class="slider">
        <img src="img/a.jpg" />
    </div>
    <div class="course_list">
        <h2>网校课程</h2>
        <h4>精选网校课程，满足你的学习兴趣。</h4>
        <div class="course_nav">
            <a class="selected">全部课程</a>
            <a>Unity</a>
            <a>虚幻</a>
            <a>JavaEE</a>
        </div>
        <div class="course_container">
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="course">
                <img src="img/course.png" />
                <span class="course_title">Web前端第一季（HTML）</span>
                <img class="person" src="img/person.png" />
                <span class="number">1507</span>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="class_list"></div>
    <div class="introduction"></div>
    <div class="footer_link"></div>
    <div class="copyright"></div>
</body>
</html>